import React, { Component } from 'react';
import PropTypes from 'prop-types';

import CommentItem from '../comment-item/comment-item';

import './commentList.css'

class CommentList extends Component {
	render() {
		const { comments, delComment } = this.props
		const display = comments.length === 0 ? 'block' : 'none'
		return (
			<div className="col-md-8">
				<h3 className="reply">评论回复：</h3>
				<h2 style={{ display }}>暂无评论，点击左侧添加评论！！！</h2>
				<ul className="list-group">
					{
						comments.map((comment, index) => <CommentItem comment={comment} key={index} delComment={delComment} index={index} />)
					}
				</ul>
			</div>
		)
	}
}

CommentList.propTypes = {
	comments: PropTypes.array.isRequired,
	delComment: PropTypes.func.isRequired


}
export default CommentList